<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-bind指令</title>
        <style>
            .active{
                border:2px solid red;
            }
            .active2{
                border:2px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <img v-bind:src="imgSrc" alt="" srcset="">
            <br>
            <!-- 三元表达式 -->
            <img :src="imgSrc" alt="" :title="imgTitle +'!!!'" :class="isActive?'active':''" @click="toggleActive">
            <br>
            <!-- 对象表达式 -->
            <img :src="imgSrc" alt="" :title="imgTitle +'!!!'" :class="{'active2':isActive2}" @click="toggleActive2">
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告。 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    imgSrc:"http://www.itheima.com/images/logo.png",
                    imgTitle:"黑马程序员",
                    isActive:false,
                    isActive2:false,
                },
                methods:{
                    toggleActive:function(){
                        this.isActive = !this.isActive;
                    },
                    toggleActive2:function(){
                        this.isActive2 = !this.isActive2;
                    },
                },
            })
        </script>
    </body>
</html>